

<template>
  <div class="min-height">
    <div class="top_parent">
      <img src="../../assets/image/book/book_banner.png" style="width:100%" alt />
      <div class="bread">
        <p>
          <router-link to="/">首页</router-link>》 典藏
        </p>
      </div>
      <div class="bread2">
        <span @click="sousuo"></span>
      </div>
    </div>

    <div class="book">
      <div class="book_flex">
        <img src="../../assets/image/book/book1.png" alt @click="nav1(1)" />

        <div class="part2">
          <img src="../../assets/image/book/book2.png" alt @click="nav2(2)" />
          <img src="../../assets/image/book/book3.png" alt @click="nav3(3)" />
        </div>
      </div>
      <ul class="ul_flex">
        <li>
          <img src="../../assets/image/book/book4.png" alt @click="nav4(4)" />
        </li>
        <li>
          <img src="../../assets/image/book/book5.png" alt @click="nav5(5)" />
        </li>
        <li>
          <img src="../../assets/image/book/book6.png" alt @click="nav6(6)" />
        </li>
      </ul>
    </div>
    <foot2 class="dibu"></foot2>
  </div>
</template>
<script>
import foot2 from "../../components/foot2";
export default {
  data() {
    return {};
  },
  components: {
    foot2: foot2,
  },

  methods: {
    sousuo() {
      let routeData = this.$router.resolve({
        name: "search",
        query: { orderId: 3, bool: true },
      });
      window.open(routeData.href, "_blank");
    },

    //dsort

    nav1(i) {
      this.$router
        .push({
          path: "/cangpinjiansuo/cangpinjiansuo2/:id",
          query: {
            orderId: 1,

            sort: "8a7aef0958b37e280158b38d781e0033",
          },
        })
        .catch((err) => {
          err;
        });
    },
    nav2(i) {
      this.$router
        .push({
          path: "/cangpinjiansuo/cangpinjiansuo2/:id",
          query: {
            orderId: 2,

            sort: "8a7aef0958b37e280158b38e61b4003b",
          },
        })
        .catch((err) => {
          err;
        });
    },
    nav3(i) {
      this.$router
        .push({
          path: "/cangpinjiansuo/cangpinjiansuo2/:id",
          query: {
            orderId: 3,

            sort: "8a7aef0958b37e280158b39114d30057",
          },
        })
        .catch((err) => {
          err;
        });
    },
    nav4(i) {
      this.$router
        .push({
          path: "/cangpinjiansuo/cangpinjiansuo2/:id",
          query: {
            orderId: 4,

            sort: "8a7aef0958b37e280158b391666e005b",
          },
        })
        .catch((err) => {
          err;
        });
    },
    nav5(i) {
      this.$router
        .push({
          path: "/cangpinjiansuo/cangpinjiansuo2/:id",
          query: {
            orderId: 5,

            sort: "8a7aef0958b37e280158b38ffed8004b",
          },
        })
        .catch((err) => {
          err;
        });
    },
    nav6(i) {
      this.$router
        .push({
          path: "/cangpinjiansuo/cangpinjiansuo2/:id",
          query: {
            orderId: 6,

            sort:
              "8a7aef0958b37e280158b391b34d005f" ||
              "4028c2526174389e016182f203ca002c" ||
              "8a7aef0958b37e280158b38ffed8004b" ||
              "8a7aef0958b37e280158b38fabab0047" ||
              "8a7aef0958b37e280158b390a8290053" ||
              "8a7aef0958b37e280158b38f0331003f" ||
              "8a7aef0958b37e280158b3933a730073",
          },
        })
        .catch((err) => {
          err;
        });
    },
  },
};
</script>
<style scoped>
.min-height {
  min-height: 600px;
}
a {
  text-decoration: none;
  color: #6e6e6e;
}
.book img {
  cursor: pointer;
}
ul,
li,
p {
  margin: 0px;
  padding: 0px;
}
li {
  list-style: none;
}
.top_parent {
  position: relative;
}
.top_parent .bread {
  max-width: 1200px;
  margin: auto;
}
.top_parent p {
  position: absolute;
  bottom: 20px;
  color: #6e6e6e;
}
.top_parent .bread2 {
  max-width: 1200px;
  margin: auto;
}
.top_parent span {
  position: absolute;
  bottom: 20px;
  display: inline-block;
  width: 200px;
  height: 35px;
  right: 180px;
  cursor: pointer;
  color: #6e6e6e;
  background: url("../../assets/image/book/book_rukou.png") no-repeat;
}
.bg_pic {
  width: 100%;
}
.book {
  width: 1150px;
  margin: auto;

  margin-bottom: 80px;
  margin-top: 40px;
}
.book_flex {
  display: flex;
  justify-content: space-between;
}
.ul_flex {
  display: flex;
  justify-content: space-between;
}
.part2 {
  display: flex;
  flex-direction: column;
}
</style>